<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<!-- <meta name="viewport" content="target-densitydpi=device-dpi,width=1920,user-scalable=no" /> -->
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="./h5/css/base.css" />
	<link rel="stylesheet" type="text/css" href="./h5/libs/idangerous.swiper.css">
	<script type="text/javascript" src="./h5/libs/jquery-1.10.1.min.js"></script>
</head>
<body>
	<div class="main">
		<div class="main-title">
			国庆档电影大数据
		</div>
		<!-- 内容部分  -->
		<div class="container">
			<!-- 监测影片 -->
			<div class="con-box">
				<!-- title -->
				<div class="cb-title">
					<div class="op-box"></div>
					<div class="cb-ctitle">
						<div class="title-icon"></div>
						<span class="cb-title-t">监测影片</span>
						<div class="title-qicon"></div>
					</div>
				</div>
				<div class="cb-container cb-survey">
					<div class="op-box"></div>
					<div class="cb-cshow">
						<div class="swiper-box">
							<div class="swiper-container">
								<div class="swiper-wrapper">
									<div class="swiper-slide" id="div_item_content">

									</div>
									<!-- <div class="swiper-slide">
										<span class="survey-list">
											<div class="survey-img">
												<img src="./images/zl.jpg" width="62" />
											</div>
											<div class="survey-info">
												<div class="survey-name">无二不做</div>
												<div class="survey-type">喜剧</div>
												<span class="survey-tag tag8"></span>
											</div>
										</span>
									</div> -->
								</div>
								<div class="pagination"></div>
							</div>
							<a class="arrow-left" href="#"></a> 
							<a class="arrow-right" href="#"></a>
						</div>
					</div>
				</div>
			</div>
			<!-- 票房 -->
			<div class="con-box">
				<!-- title -->
				<div class="cb-title">
					<div class="op-box"></div>
					<div class="cb-ctitle">
						<div class="title-icon"></div>
						<span class="cb-title-t">票房（万元）</span>
						<div class="title-qicon"></div>
					</div>
				</div>
				<div class="cb-container">
					<div class="op-box"></div>
					<div class="cb-cshow">
						<span class="cshow-l">
							<div class="cshow-count" id="div_piaofangnow">0</div>
							<div class="cshow-title">今日票房（万元）</div>
						</span>
						<span class="cshow-l">
							<div class="cshow-count"  id="div_piaofangall" >0</div>
							<div class="cshow-title">监测影片总票房（万元）</div>
						</span>
					</div>
				</div>
			</div>
			<!-- 大盘走势 -->
			<div class="con-box">
				<!-- title -->
				<div class="cb-title">
					<div class="op-box"></div>
					<div class="cb-ctitle">
						<div class="title-icon"></div>
						<span class="cb-title-t">大盘走势</span>
						<div class="title-qicon"></div>
					</div>
				</div>
				<div class="cb-container cb-market">
					<div class="op-box"></div>
					<div class="cb-cshow">
						<div id="chart5" class="chart-box"></div>
					</div>
				</div>
			</div>
			<!-- 想看日增平均指数 -->
			<div class="con-box">
				<!-- title -->
				<div class="cb-title">
					<div class="op-box"></div>
					<div class="cb-ctitle">
						<div class="title-icon"></div>
						<span class="cb-title-t">想看日增平均指数</span>
						<div class="title-qicon"></div>
					</div>
				</div>
				<div class="cb-container cb-chart">
					<div class="op-box"></div>
					<div class="cb-cshow">
						<div id="chart1" class="chart-box"></div>
					</div>
				</div>
			</div>
			<!-- 微博指数 -->
			<div class="con-box">
				<!-- title -->
				<div class="cb-title">
					<div class="op-box"></div>
					<div class="cb-ctitle">
						<div class="title-icon"></div>
						<span class="cb-title-t">微博指数</span>
						<div class="title-qicon"></div>
					</div>
				</div>
				<div class="cb-container cb-chart">
					<div class="op-box"></div>
					<div class="cb-cshow">
						<div id="chart3" class="chart-box"></div>
					</div>
				</div>
			</div>
			<!-- 百度指数 -->
			<div class="con-box">
				<!-- title -->
				<div class="cb-title">
					<div class="op-box"></div>
					<div class="cb-ctitle">
						<div class="title-icon"></div>
						<span class="cb-title-t">百度指数</span>
						<div class="title-qicon"></div>
					</div>
				</div>
				<div class="cb-container cb-index">
					<div class="op-box"></div>
					<div class="cb-cshow">
						<div id="chart2" class="chart-box"></div>
					</div>
				</div>
			</div>
			<!-- 微信指数 -->
			<div class="con-box">
				<!-- title -->
				<div class="cb-title">
					<div class="op-box"></div>
					<div class="cb-ctitle">
						<div class="title-icon"></div>
						<span class="cb-title-t">微信指数</span>
						<div class="title-qicon"></div>
					</div>
				</div>
				<div class="cb-container cb-index">
					<div class="op-box"></div>
					<div class="cb-cshow">
						<div id="chart4" class="chart-box"></div>
					</div>
				</div>
			</div>
			<!-- 影片评分 -->
			<div class="con-box">
				<!-- title -->
				<div class="cb-title">
					<div class="op-box"></div>
					<div class="cb-ctitle">
						<div class="title-icon"></div>
						<span class="cb-title-t">影片评分</span>
						<div class="title-qicon"></div>
					</div>
				</div>
				<div class="cb-container cb-source">
					<div class="op-box"></div>
					<div class="cb-cshow">
						<div class="list-form">
							<span class="lf-title">
								<i class="title-list title-list-name width46">名称</i>
								<i class="title-list width24">猫眼评分</i>
								<i class="title-list width24">豆瓣评分</i>
							</span>
							<ul class="lf-works" id="li_pingfen">


							</ul>
						</div>
					</div>
				</div>
			</div>
			<!-- 3大平台片花累计播放量 -->
			<div class="con-box">
				<!-- title -->
				<div class="cb-title">
					<div class="op-box"></div>
					<div class="cb-ctitle">
						<div class="title-icon"></div>
						<span class="cb-title-t">3大平台片花累计播放量</span>
						<div class="title-qicon"></div>
					</div>
				</div>
				<div class="cb-container cb-list">
					<div class="op-box"></div>
					<div class="cb-cshow">
						<div class="list-form">
							<span class="lf-title">
								<i class="title-list title-list-name width46">名称</i>
								<i class="title-list width16">
									<span class="title-flat flat-aqiyi"></span>
								</i>
								<i class="title-list width16">
									<span class="title-flat flat-txun"></span>
								</i>
								<i class="title-list width16">
									<span class="title-flat flat-youku"></span>
								</i>
							</span>
							<ul class="lf-works" id="li_bofangliang">


							</ul>
						</div>
					</div>
				</div>
			</div>
			<!-- 微博热议话题 -->
			<div class="con-box">
				<!-- title -->
				<div class="cb-title">
					<div class="op-box"></div>
					<div class="cb-ctitle">
						<div class="title-icon"></div>
						<span class="cb-title-t">微博热议话题</span>
						<div class="title-qicon"></div>
					</div>
				</div>
				<div class="cb-container cb-list">
					<div class="op-box"></div>
					<div class="cb-cshow">
						<div class="cb-cshow">
							<div class="list-form list-form-wb">
								<span class="lf-title">
									<i class="title-list title-list-name width48">名称</i>
									<i class="title-list width24">
										阅读量
									</i>
									<i class="title-list width24">
										评论量
									</i>

								</span>
								<ul class="lf-works" id="weibo_yuedu">

								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 相关微博转发 -->
			<div class="con-box">
				<!-- title -->
				<div class="cb-title">
					<div class="op-box"></div>
					<div class="cb-ctitle">
						<div class="title-icon"></div>
						<span class="cb-title-t">相关微博转发</span>
						<div class="title-qicon"></div>
					</div>
				</div>
				<div class="cb-container cb-wb">
					<div class="op-box"></div>
					<div class="cb-cshow cb-forward">
						<div class="list-form">
							<span class="lf-title">
								<i class="title-list title-list-name width68">博主</i>
								<i class="title-list width30">转发量</i>
							</span>
							<ul class="lf-works" id="bozhu_zhuan">

							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 数据来源 提示框 -->
		<div class="qicon-fix">数据来源 提示框</div>
	</div>

	<div class="main-bg"></div>
	<script type="text/javascript" src="./h5/libs/echarts.common.min.js"></script>
	<script type="text/javascript" src="./h5/libs/idangerous.swiper.min.js"></script>
	<script type="text/javascript" src="./h5/js/index.js"></script>
	<script>
        function  gotoMovieinof(movieid,baseid) {
            window.location.href
                ='mmaoyandetails?movieid='+movieid+'&baseid='+baseid;
        }
		/*
		 * 373436、9912ef、552a70、eee8f2、3cd986、23f52c、0d4e10、ebf31d、60630b、878781、f99f1d
		 * */
        var
            colorDataAry=['#f03e3e','#ff9641','#ffe241','#7bd93c','#3cd9ba','#3c61d9','#bd3cd9','#6b6169',
                '#373436','#9912ef','#552a70','#eee8f2','#3cd986','#23f52c','#0d4e10','#ebf31d','#60630b',
                '#878781','#f99f1d'];
        var CloroNameAry=[];
        function getColorbyname(name) {
            var color='';
            $.each(CloroNameAry,function (index,item) {
                if (item['name']==name){
                    color=item.color;
                    return false
                }
            });
            return color;
        }
        getAllMovie();
        function  getAllMovie() {
            $.ajax({
                type: 'get',
                url: 'api/index/getallmovie',
                dataType: 'json',
                success: function(data){
                    var videoList=data.result;
                    if(videoList&& videoList.length>0){
                        var _html='';
                        var _html1='';
                        $.each(videoList,function (index,item) {
                            //天聪数据
                            CloroNameAry.push({'name':item.name,'color':colorDataAry[index]});
                            _html+='<span class="survey-list">'+
                                '<div class="survey-img" onclick="gotoMovieinof(\''+item.movieid+'\',\''+item.baseid+'\')">'+
                                '<img src="'+item.phonto+'" width="62" />'+
                                '   </div>'+
                                '   <div class="survey-info">'+
                                '   <div class="survey-name">'+item.name+'</div>'+
                                '   <div class="survey-type">'+item.category+'</div>'+
                                '   <span class="survey-tag " ><img src="images/'+colorDataAry[index].replace('#','')+'.png"></span>'+
                                '   </div>'+
                                '   </span>';
                        });
                        $('#div_item_content').html(_html);
                        //$('#div_item_content1').html(_html1);
                        loadSwiper();
                        //指数
                        getweibozhishu();
                        getzhishu();


                    }
                }
            });
        }
        getPingfen();
        function  getPingfen() {
            $.ajax({
                type: 'get',
                url: 'api/index/getpingfen',
                dataType: 'json',
                success: function(data){
                    var videoList=data.result;
                    if(videoList&& videoList.length>0){
                        var _html='';
                        $.each(videoList,function (index,item) {
                            _html+='<li class="works-list">'+
                                '<span class="wl-type wl-type-name width46">'+
                                '<i>'+(index+1)+'. </i><i class="type-">'+item.name+'</i>'+
                                '   </span>'+
                                '   <span class="wl-type width24">'+ item.maoyanScore+
                                '   </span>'+
                                '   <span class="wl-type width24">'+
                                item.doubanScore+
                                '   </span>'+
                                '   </li>';
                        });

                        $('#li_pingfen').html(_html);
                    }
                }
            });
        }
        getBozhuTop5();
        function  getBozhuTop5() {
            $.ajax({
                type: 'get',
                url: 'api/index/getbozhutop5',
                dataType: 'json',
                success: function(data){
                    var videoList=data.result;
                    if(videoList&& videoList.length>0){
                        var _html='';
                        $.each(videoList,function (index,item) {
                            _html+='<li class="works-list">'+
                                '<span class="wl-type wl-type-name width68">'+
                                '   <i>'+(index+1)+' </i><i class="type-">'+item.bozhu+'</i>'+
                                '   </span>'+
                                '   <span class="wl-type width30">'+
                                item.share+
                                '   </span>'+
                                '   </li>';
                        });
                        $('#bozhu_zhuan').html(_html);
                    }
                }
            });
        }

        getKeyHuatiTop7();
        function  getKeyHuatiTop7() {
            $.ajax({
                type: 'get',
                url: 'api/index/getKeyHuatiTop7',
                dataType: 'json',
                success: function(data){
                    var videoList=data.result;
                    if(videoList&& videoList.length>0){
                        var _html='';
                        $.each(videoList,function (index,item) {
                            var css='';
                            var content='';
                            if (item.tab==0){
                                css='show-sort'
                                content='--';
                            }
                            else if (item.tab==-1){
                                css='show-sort down'
                            }
                            else{
                                css='show-sort up'
                            }

                            _html+='<li class="works-list">'+
                                '<span class="wl-type wl-type-name width48">'+
                                '<i>'+(index+1)+'. </i><i class="">'+item.name+'</i>'+
                                '   <div class="'+css+'">'+content+'</div>'+
                                '   </span>'+
                                '   <span class="wl-type width24">'+
                                item.readNumStr+
                                '   </span>'+
                                '   <span class="wl-type width24">'+
                                item.discussNumStr+
                                '   </span>'+
                                '   </li>';
                        });
                        $('#weibo_yuedu').html(_html);
                    }
                }
            });
        }
        /**
         * 想看日增平均指数  各种指数
         */
        function daysAverageIndex(id,str,data,max,dateary){

            $("#" + id).parent().html('').append('<div id="'+id+'" class="chart-box"></div>');

            var myChart = echarts.init(document.getElementById(id));
            option = {
                title: {
                    show: false,
                    text: '',
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 16
                    }
                },
                "dataZoom": [{
                    "type": "inside",
                    "show": true,
                    "height": 15,
                    "start": 70,
                    "end": 100
                }],
                tooltip: {
                    trigger: 'axis',
                    position: ['40%', '5%'],
                    formatter: function(parms){

                        str = str || '';

                        var html = '<div style="text-align: center;">'+str+'</div>';

                        for(var i=0,len = parms.length;i<len;i++){

                            html += '<div style="text-align: left;font-size: 12px;"><span style="display: inline-block;width: 70px;">'+parms[i].seriesName+':</span>'+parms[i].value+'</div>'

                        }

                        return html;
                    }
                },
                grid: {
                    // width: "90%",
                    height: "86%",
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: dateary,
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#233e66',
                        }
                    },
                    axisTick: {
                        show: false,
                        inside: true,
                        alignWithLabel: true
                    },
                },
                yAxis: {
                    type: 'value',
                    //max:max,
                    splitLine:{
                        show: true,
                        lineStyle: {
                            color: "#233e66",//横向分割线的 样式
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#ffffff'
                        }
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#ffffff'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                series: data,
                lineStyle: {
                    normal: {
                        width: 1
                    }
                },
                //color:['#f03e3e','#ff9641','#ffe241','#7bd93c','#3cd9ba','#3c61d9','#bd3cd9'],
            }

            myChart.setOption(option);

        }


        function  getweibozhishu() {
            $.ajax({
                type: 'get',
                url: 'api/index/getweibozhishu',
                dataType: 'json',
                success: function(data){
                    var videoList=data.result;
                    if(videoList&& videoList.length>0){
//                        var _html='';
                        var _data=[];
                        var _dateAry=[];
                        $.each(videoList,function (index,item) {
                            _dateAry=item.dateList
                            _data.push({
                                name: item.name,
                                type: 'line',
                                data: item.trentList,
                                symbolSize:8,
                                smooth: true,
                                itemStyle : { //折线拐点标志的样式
                                    normal: {
                                        opacity: 0
                                    },
                                    emphasis: {
                                        opacity: 0
                                    }

                                },
                                lineStyle: {
                                    normal: {
                                        color:getColorbyname(item.name)
                                    }
                                }
                            })
                            console.log(getColorbyname(item.name)+'--'+item.name)
                        });

                        daysAverageIndex('chart3','微博指数',_data,100000,_dateAry);

                        //$('#weibo_yuedu').html(_html);
                    }
                }
            });
        }
        //getPlayCount


        function  getzhishu() {
            $.ajax({
                type: 'get',
                url: 'api/index/getzhishu',
                dataType: 'json',
                success: function(data){
                    if (data){
                        var _baidudata=[];
                        var _weixindata=[];
                        var _lookdata=[];
                        var _dateAry=[];
                        $.each(data.result,function(index,item){
                            _dateAry=item.dateList;
                            _baidudata.push({
                                name: item.name,
                                type: 'line',
                                data: item.baiduList,
                                symbolSize:8,
                                smooth: true,
                                itemStyle : { //折线拐点标志的样式
                                    normal: {
                                        opacity: 0
                                    },
                                    emphasis: {
                                        opacity: 0
                                    }

                                },
                                lineStyle: {
                                    normal: {
                                        color: getColorbyname(item.name)
                                    }
                                }
                            });
                            _weixindata.push({
                                name: item.name,
                                type: 'line',
                                data: item.weixinList,
                                symbolSize:8,
                                smooth: true,
                                itemStyle : { //折线拐点标志的样式
                                    normal: {
                                        opacity: 0
                                    },
                                    emphasis: {
                                        opacity: 0
                                    }

                                },
                                lineStyle: {
                                    normal: {
                                        //color: "#7bd93c"
                                    }
                                }
                            });
                            _lookdata.push({
                                name: item.name,
                                type: 'line',
                                data: item.lookList,
                                symbolSize:8,
                                smooth: true,
                                itemStyle : { //折线拐点标志的样式
                                    normal: {
                                        opacity: 0
                                    },
                                    emphasis: {
                                        opacity: 0
                                    }

                                },
                                lineStyle: {
                                    normal: {
                                        //color: "#7bd93c"
                                    }
                                }
                            });

                        });

                        daysAverageIndex('chart1','想看指数',_lookdata,Math.max.apply(null,
                            _lookdata),_dateAry);
                        daysAverageIndex('chart2','百度指数',_baidudata,Math.max.apply(null,
                            _baidudata),_dateAry);
                        daysAverageIndex('chart4','微信指数',_weixindata,Math.max.apply(null,
                            _weixindata),_dateAry);
                    }

                }
            });
        }
        getPlayCount();
        function  getPlayCount() {
            $.ajax({
                type: 'get',
                url: 'api/index/getPlayCount',
                dataType: 'json',
                success: function(data){
                    var videoList=data.result;
                    if(videoList&& videoList.length>0){
                        var _html='';

                        $.each(videoList,function (index,item) {
                            var css='';
                            var content='';
                            if (item.tab==0){
                                css='show-sort'
                                content='--';
                            }
                            else if (item.tab==-1){
                                css='show-sort down'
                            }
                            else{
                                css='show-sort up'
                            }
                            _html+='	<li class="works-list">'+
                                '<span class="wl-type wl-type-name width46">'+
                                ' <i>'+(index+1)+'. </i><i class="type-name">'+item.name+'</i>'+
                                ' <div class="'+css+'">'+content+'</div>'+
                                '  </span>'+
                                '  <span class="wl-type width16">'+
                                item.iqiyiCount+
                                '   </span>'+
                                '   <span class="wl-type width16">'+
                                item.qqCount+
                                '    </span>'+
                                '   <span class="wl-type width16">'+
                                item.youkuCount+
                                '    </span>'+
                                '    </li>'
                        });
                        $('#li_bofangliang').html(_html);
                    }
                }
            });
        }
        getPiaofangNow();
        function  getPiaofangNow() {
            $.ajax({
                type: 'get',
                url: 'api/index/getPiaofangNow',
                dataType: 'json',
                success: function(data){
                    if (data){
                        $('#div_piaofangall').html((data.result.sum/10000).toFixed(2));
                        $('#div_piaofangnow').html((data.result.now/10000).toFixed(2));
                    }

                }
            });
        }
        //getzhishu



	</script>

</body>
</html>